<template>
  <div class="bg-fff device-gateway pt-10 pb-10">
    <el-form style="width: 400px" ref="form" :model="form" label-width="80px">
      <el-form-item label="在线状态">
        <el-select v-model="form.online" placeholder="请选择状态">
          <el-option label="在线" :value="true"></el-option>
          <el-option label="离线" :value="false"></el-option>
          <el-option label="全部" value="all"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="EUI">
        <el-input v-model="form.eui" placeholder="eui关键字"></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="开始日期"
            v-model="form.date1"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
        <el-col class="flex jc-c" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="结束日期"
            v-model="form.date2"
            style="width: 100%"
          ></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="primary" @click="handleSearch"
          >搜索</el-button
        >
        <el-button size="mini" type="primary" @click="clear">清除</el-button>
        <el-button size="mini" type="primary" @click="refresh">刷新</el-button>

        <span class="ml-15">结果: {{ total }}</span>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  props: ["total"],

  data() {
    return {
      form: {
        online: "all", // 在线状态
        eui: "",
        date1: "",
        date2: "",
      },
    };
  },
  methods: {
    handleSearch() {
      this.$emit("search", this.form); // 给父组件传递数据
    },
    refresh() {
      location.reload(); // 页面重新加载
    },

    clear() {
      this.form.online = "all";
      this.form.eui = "";
      this.form.date1 = "";
      this.form.date2 = "";
      // 通知父组件重新获取数据
      this.$emit("clear", this.form);
    },
  },
};
</script>

<style lang="less">
.device-gateway {
  .el-form-item {
    margin-bottom: 5px;
  }
  .el-form-item__content {
    line-height: 30px;
  }
  .el-input__inner {
    height: 30px;
  }
  .el-button + .el-button {
    margin-left: 1px;
  }
}
</style>